import React, { useState, useImperativeHandle } from 'react';

import { Drawer, Collapse } from 'antd';
import { 
  EnvironmentOutlined,
  BookOutlined,
  FlagOutlined,
  PushpinOutlined,
  TagOutlined
} from '@ant-design/icons';
import styles from "../styles/areaDetails.module.css";

const { Panel } = Collapse;

const ICON_COLOR = '#3072f6'

const AreaDetails = React.memo(({drawerRef}) => {
  const [open, setOpen] = useState(false);
  const [areaData, setAreaData] = useState({});
  const onClose = () => {
    setOpen(false);
  };

  // 暴露给父组件的方法
  useImperativeHandle(drawerRef, () => ({
    showDrawer: (data) => {
      setAreaData(data);
      setOpen(true)
    },
  }))

  const DrawerTitle = React.memo(() => {
    return (
      <div className={styles.address_info}>
        <div className={styles.place}>{areaData.address}</div>
        <div className={styles.address}>
          {areaData.provinceName+areaData.cityName+areaData.countyName+areaData.address}
        </div>
      </div>
    )
  })

  const PanelHeader = ({Icon, title}) => {
    return (
      <div className='panel_header'>{Icon} {title}</div>
    )
  }

  const PolicyInfos = () => {
    const list = areaData.list

    return(
      <Collapse accordion expandIconPosition='end' bordered={false} className={styles.info_collapse}>
        {
          list.map(item => (
            <Panel key={item.policyNo} header={<PanelHeader Icon={<PushpinOutlined />} title={item.policyNo}/>}>
              <div className="policy-detail">
                <div className="policy-detail-item">
                  <span className="label">被保人：</span>
                  <span className="text">{item.insured}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">保单号：</span>
                  <span className="text">{item.policyNo}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">归属机构：</span>
                  <span className="text">{item.unitName}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">险种名称：</span>
                  <span className="text">{item.riskName}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">投保人：</span>
                  <span className="text">{item.policyHolder}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">保额：</span>
                  <span className="text money">￥{item.policyAmount}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">保费：</span>
                  <span className="text money">￥{item.policyFee}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">理赔费用：</span>
                  <span className="text money">￥{item.claimAmount}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">保险开始日期：</span>
                  <span className="text">{item.insuranceStartTime}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">保险截止日期：</span>
                  <span className="text">{item.insuranceEndTime}</span>
                </div>
              </div>
            </Panel>
          ))
        }
      </Collapse>
    )
  }
  const SurveyInfos = () => {
    const list = areaData.riskSurveyInfoList

    return(
      <Collapse accordion expandIconPosition='end' bordered={false} className={styles.info_collapse}>
        {
          list.map(item => (
            <Panel header={<PanelHeader Icon={<TagOutlined />} title={item.id}/>} key={item.id} >
              <div className="policy-detail">
                <div className="policy-detail-item">
                  <span className="label">地址编码：</span>
                  <span className="text">{item.addressCode}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">风勘类型：</span>
                  <span className="text">{item.rsType}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">风勘任务编号：</span>
                  <span className="text">{item.rsTaskNo}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">风勘周期：</span>
                  <span className="text">{item.rsPeriod}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">是否存在未整改问题：</span>
                  <span className="text">{item.rsRectificationFlag}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">是否存在超期未调整问题：</span>
                  <span className="text">{item.rsOverRectificationFlag}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">风勘次数：</span>
                  <span className="text">{item.rsCount}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">风勘里程：</span>
                  <span className="text">{item.rsMileage}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">整车仓存最大保险价值(我司)：</span>
                  <span className="text">{item.maxCapacityValue}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">整改通知次数：</span>
                  <span className="text">{item.rectificationNoticeCount}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">任务创建日期：</span>
                  <span className="text">{item.taskCreateDate}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">风勘完成日期：</span>
                  <span className="text">{item.rsFinishDate}</span>
                </div>
                <div className="policy-detail-item">
                  <span className="label">风勘报告通过时间：</span>
                  <span className="text">{item.reportPassTime}</span>
                </div>
              </div>
            </Panel>
          ))
        }
      </Collapse>
    )
  }

  const DrawerProps = {
    title: <DrawerTitle />,
    closeIcon: <EnvironmentOutlined style={{fontSize: '33px', color: ICON_COLOR}}/>,
    placement: "right",
    onClose,
    open,
    bodyStyle: {
      padding: 0
    }
  }

  return (
    <Drawer {...DrawerProps}>

      <div className={styles.total}>
        <div className={styles.total_item}>
          <span>总保单数</span>
          <span className='count'>{areaData.totalPolicyCount}</span>
        </div>
        <div className={styles.total_item}>
          <span>总保额</span>
          <span className='money'>￥{areaData.totalPolicyAmount}</span>
        </div>
        <div className={styles.total_item}>
          <span>总保费</span>
          <span className='money'>￥{areaData.totalPolicyFee}</span>
        </div>
        <div className={styles.total_item}>
          <span>总理赔费用</span>
          <span className='money'>￥{areaData.totalClaimAmount}</span>
        </div>
      </div>

      <Collapse accordion expandIconPosition='end' defaultActiveKey='policyInfo'>
        <Panel header={<PanelHeader Icon={<BookOutlined style={{color: ICON_COLOR}}/>} title='保单信息'/>} key="policyInfo">
          <PolicyInfos />
        </Panel>
        <Panel header={<PanelHeader Icon={<FlagOutlined style={{color: ICON_COLOR}}/>} title='风堪信息'/>} key="SurveyInfo">
          <SurveyInfos />
        </Panel>
      </Collapse>

    </Drawer>
  );
});
export default AreaDetails;